<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="60%"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" status-icon :rules="rules">
      <el-form-item label="菜单" prop="menu_id" label-width="60px">
        <el-select
          v-model="form.menu_id"
          placeholder="请选择"
          @change="menuChange"
        >
          <el-option
            v-for="item in menus"
            :key="item.id"
            :label="item.title + ' ' + item.controller"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="60px">
        <el-transfer
          v-model="select"
          :data="permissions"
          :titles="['未授权', '已授权']"
        ></el-transfer>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm('form')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listMenu } from "@/api/menu";
import { addPermission, editPermission } from "@/api/permission";
import {
  getRoleMenus,
  getRoleMenuPermissions,
  saveRolePermissions,
} from "@/api/role";

export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: true,
    },
    form: {
      type: Object,
      default() {
        return {};
      },
    },
    roleId: {},
    removeClose: Function,
  },
  watch: {
    visible(value) {
      if (value) {
        this.getRoleMenuList(this.roleId);
      }
    },
  },
  data() {
    // 验证
    const validateRequire = (rule, value, callback) => {
      if (value === "") {
        this.$message({
          message: rule.field + "为必传项",
          type: "error",
        });
        callback(new Error(rule.field + "为必传项"));
      } else {
        callback();
      }
    };
    return {
      menus: [],
      rules: {
        menu_id: [{ validator: validateRequire }],
      },
      permissions: [], // 菜单下所有的节点
      select: [], // 菜单下已选中的节点
      menuId: '', // 当前选中的菜单id
    };
  },
  methods: {
    // 监听下拉框
    menuChange(id) {
      this.menuId = id
      getRoleMenuPermissions(this.roleId, id).then((response) => {
        let data = [];
        let allData = response.data.permissions;
        allData.forEach((value, index) => {
          data.push({
            label: value.title,
            key: value.id,
          });
        });
        // 接口总数据筛选出来的新数组赋值给permissions
        this.permissions = data;
        // 已选中的数据
        this.select = response.data.select;
      });
    },
    // 关闭弹框
    handleClose() {
      this.$refs["form"].resetFields();
      this.permissions = [];
      this.select = [];
      this.menuId = '';
      this.removeClose();
    },
    // 获取角色菜单
    getRoleMenuList(id) {
      getRoleMenus(id).then((response) => {
        this.menus = response.data;
      });
    },
    // 验证
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        // 表单校验
        if (!valid) {
          return false;
        }
        // 提交数据
        this.submitData();
      });
    },
    // 提交表单
    async submitData() {
      let response = null;
      let form = {
        role_id: this.roleId,
        permission_id: this.select,
        menu_id: this.menuId,
      };
      response = await saveRolePermissions(form);
      this.$notify({
        title: response.message,
        message: response.message,
        type: response.code == 1 ? "success" : "error",
        duration: 2000,
      });
      if (response.code == 1) {
        // 关闭窗口
        this.handleClose();
      }
    },
  },
};
</script>

<style>
</style>